<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8" />
		<title>{:sysconfig('im','title')}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<link rel="stylesheet" href="/qstatic/css/reset.css" />
		<link rel="stylesheet" href="/qstatic/css/animate.css" />
		<link rel="stylesheet" href="/qstatic/css/swiper-3.4.1.min.css" />
		<link rel="stylesheet" href="/qstatic/css/layout.css?12" />
		<script src="/qstatic/js/jquery-1.9.1.min.js"></script>
		<script src="/qstatic/js/zepto.min.js"></script>
		<script src="/qstatic/js/fontSize.js"></script>
		<script src="/qstatic/js/swiper-3.4.1.min.js"></script>
		<script src="/qstatic/js/wcPop/wcPop.js"></script>
		<script src="/qstatic/js/layui.js"></script>
		<link rel="stylesheet" href="/qstatic/js/css/layui.css" />

	</head>
	<body class="overflow">

		<!-- <>聊天室主容器 -->
		<div class="wechat__panel clearfix">
			<div class="wc__home-wrapper flexbox flex__direction-column">
				<!-- //顶部 -->
				<div class="wc__headerBar fixed">
					<div class="inner flexbox">
						<h2 class="barTit barTitLg flex1">{:sysconfig('im','title')}<em class="ff-ar">
								<!--(105)-->
							</em>
						</h2>
						<a class="barIco sear" href="/chat/addfd" id="J__topbarSear"></a>
					</div>
				</div>

				<!-- //4个tabBar滑动切换 -->
				<div class="wc__swiper-tabBar flex1">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<!-- //1、）聊天室主页-->
							<div class="swiper-slide">
								<div class="wc__scrolling-panel">
									<!-- //聊天记录信息 -->
									<div class="wc__recordChat-list" id="J__recordChatList">
										<ul class="clearfix">
											<!--在线客服-->
                                           
											{if $kf != '-1'}
											<li class="flexbox flex-alignc wc__material-cell" style="background:#f3f3f3" routeurl="/chat/chat?id={:sysconfig('im','kf')}">
												<div class="img">
													<img src="/qstatic/img/kftx.jpg">
												</div>
												<div class="info flex1">
													<h2 class="title">
														<font color="red">在线客服</font>
													</h2>
												</div>
											</li>
											{/if}
											<!--end-->
											<!--私聊消息-->

											<!--私聊消息结束-->
											<!--群组-->
											{volist name="list" id="vo"}
											<li class="flexbox flex-alignc wc__material-cell" style="background:#f3f3f3" routeUrl="/chat/groupchat?id={$vo.id}">
												{if $vo.groupcount > '1'}
												<div class="img imgs">
													{volist name="$vo.groupusers" id="num" key="index"}
                                                        {if $index < 10}
                                                            <img src="{$num.tx|default='/qstatic/img/uimg/u__chat-img11.jpg'}" />
                                                            <em class="wc__badge" id='group{$vo.id}'></em>
                                                        {/if}
                                                    {/volist}
												</div>
												{else /}
												<div class="img">
													<img src="/qstatic/img/uimg/u__chat-img11.jpg" />
													<em class="wc__badge" id='group{$vo.id}'></em>
												</div>
												{/if}
												<div class="info flex1">
													<h2 class="title">{$vo.title}</h2>
													<p class="desc clamp2">{$vo.content}</p>
												</div>
												<label class="time flex-selft">{$vo.time|date="H:s"}</label>
											</li>
											{/volist}
											<!--群组结束-->
											<div id="sldata"></div>
										</ul>
									</div>
								</div>
							</div>
							<style type="text/css">
								i.ico.i1.news {
																    background: url(/qstatic/img/new.png) no-repeat center;
																    background-size: 0.75rem;
																    display: inline-block;
																    vertical-align: top;
																    margin-right: .2rem; 
																    height: .7rem;
																    width: .7rem;
																}
							</style>
							<!-- //2、通讯录-->
							<div class="swiper-slide">
								<div class="wc__scrolling-panel">
									<div class="wc__addrFriend-list" id="J__addrFriendList">
										<ul class="clearfix">
											<li>
												<div class="row flexbox flex-alignc wc__material-cell">
													<i class="ico i1 news" style="border-radius: 0.2rem;">
														<em class="wc__badge">{neq name="newsfrineds" value="0"}{$newsfrineds}{/neq}</em>
													</i>
													<span class="name flex1" routeUrl="/chat/newsfd">新朋友</span>
													<img class="uimg" src="/qstatic/img/management.png" routeUrl="/chat/listgroup" style="border-radius: 0.2rem;">
													<span class="name flex1" routeUrl="/chat/listgroup">群组</span>
													<img class="uimg" src="/qstatic/img/add_user.png" routeUrl="/chat/addfd" style="border-radius: 0.2rem;">
													<span class="name flex1" routeUrl="/chat/addfd">添加好友</span>
												</div>
											</li>
											{volist name="frineds_sz" id="voo"}
											<li id="{$voo.firstletter}">
												<h2 class="initial">{$voo.firstletter}</h2>
												{volist name="frineds" id="vo"}
												{eq name="$vo['firstletter']" value="$voo['firstletter']"}
												<div class="row flexbox flex-alignc wc__material-cell" routeUrl="/chat/chat?id={$vo.fdid}">
													<img class="uimg" src="{$vo['fdidimg']}" />
													<span class="name flex1">{$vo['fdidname']}</span>
												</div>
												{/eq}
												{/volist}
											</li>
											{/volist}
										</ul>
										<div class="total">{$fdzs}位联系人</div>
									</div>
								</div>
								<!-- //字母显示 -->
								<div class="wc__addrFriend-showletter">A</div>
								<!-- //26字母 -->
								<div class="wc__addrFriend-floatletter">
									<em>A</em>
									<em>B</em>
									<em>C</em>
									<em>D</em>
									<em>E</em>
									<em>F</em>
									<em>G</em>
									<em>H</em>
									<em>I</em>
									<em>J</em>
									<em>K</em>
									<em>L</em>
									<em>M</em>
									<em>N</em>
									<em>O</em>
									<em>P</em>
									<em>Q</em>
									<em>R</em>
									<em>S</em>
									<em>T</em>
									<em>U</em>
									<em>V</em>
									<em>W</em>
									<em>X</em>
									<em>Y</em>
									<em>Z</em>
								</div>
							</div>
							<div class="swiper-slide">
								<div class="wc__scrolling-panel">
									<div class="wc__addrFriend-list" id="J__addrFriendList">
										<!--朋友圈-->
										<script>
										</script>
										{if sysconfig('im','url') == null}
										<iframe src="/1436/" style="position: absolute; display: block; border: 0px;  top: 0px;bottom: 617px; width: 100%; height: 100%;"></iframe>
										{else/}
										<iframe src="{:sysconfig('im','url')}" style="position: absolute; display: block; border: 0px;  top: 0px;bottom: 617px; width: 100%; height: 100%;"></iframe>
										{/if}
									</div>
								</div>
							</div>
							<!--end-->
							<!-- //3、我的-->
							<div class="swiper-slide">
								<div class="wc__scrolling-panel">
									<div class="wc__ucenter-list" id="J__ucenterList">
										<ul class="clearfix">
											<li>
												<div class="item flexbox flex-alignc wc__material-cell" routeUrl="/chat/myinfo">
													<img class="uimg" src="{$userinfo.tx|default="/qstatic/img/uimg/u__chat-img10.jpg"}" style="border-radius: 0.4rem;"/>
													<span class="txt flex1">
														<em>{$userinfo.nickname}</em>
														<i>微聊号：{$userinfo.name}</i>
													</span>
													<div class="qrcode wc__arr"></div>
												</div>
											</li>
											<li>
												<div class="item flexbox flex-alignc wc__material-cell" routeUrl="/chat/listgroup">
													<img class="icon" src="/qstatic/img/management.png" style="border-radius: 0.2rem;"/>
													<span class="txt flex1">我去过的群组</span>
													<em class="lbl">
														<!--1个-->
													</em>
												</div>
												<div class="item flexbox flex-alignc wc__material-cell" routeUrl="/chat/addgroup">
													<img class="icon" src="/qstatic/img/icon_jianqun.png" style="border-radius: 0.2rem;"/>
													<span class="txt flex1">创建新群</span>
													<em class="lbl">
														<!--1个-->
													</em>
												</div>
												<!--<div class="item flexbox flex-alignc wc__material-cell">-->
												<!--	<img class="icon" src="/qstatic/img/icon_red_bag.png" />-->
												<!--<span class="txt flex1">我的余额</span>-->

												<!--</div>-->
											</li>
											<li>
											</li>
											<li>
												<div class="item flexbox flex-alignc wc__material-cell" id="J__logout">
													<img class="icon" src="/qstatic/img/icon__uc-img05.png" />
													<span class="txt flex1">退出登录</span>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- //底部tabbar -->
				<div class="wechat__tabBar">
					<div class="bottomfixed wc__borT">
						<ul class="flexbox flex-alignc wechat-pagination">

							<li class="flex1 on">
								<i class="ico i1">
									<!--<em class="wc__badge">105</em>-->
								</i>
								<span>消息</span>
							</li>

							<li class="flex1">
								<i class="ico i2"></i>
								<span>通讯录</span>
							</li>

							<li class="flex1">

								<i class="ico i5"></i>
								<span>公告</span>
							</li>
							<li class="flex1">
								<i class="ico i4"></i>
								<span>我</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>


		<!-- 左右滑屏切换.Start -->
		<script type="text/javascript">
			var chatSwiper = new Swiper('.swiper-container',{
									pagination: '.wechat-pagination',
									paginationClickable: true,
									paginationBulletRender: function (chatSwiper, index, className) {
										switch (index) {
											case 0:
												name='<i class="ico i1"><!--<em class="wc__badge">105</em>--></i><span>消息</span>';
												break;
											case 1:
												name='<i class="ico i2"><em class="wc__badge">{neq name="newsfrineds" value="0"}{$newsfrineds}{/neq}</em></i><span>通讯录</span>';
												break;
											case 2:
			
												name='<i class="ico i3"></i><span>公告</span>';
												break;
											case 3:
												name='<i class="ico i4"></i><span>我</span>';
												break;
											default: name='';
											
										}
										return '<li class="flex1 ' + className + '">' + name + '</li>';
									}
								})
		</script>
		<!-- 左右滑屏切换 end -->

		<script type="text/javascript">
			/** __公共函数 */
								$(function(){
									// 禁止长按弹出系统菜单
									$(".wechat__panel").on("contextmenu", function(e){
										e.preventDefault();
									});
								});
								
								/** __自定函数 */
								$(function(){
									//***1、消息-------------------------
									// 聊天记录页面（长按操作）
									$("#J__recordChatList").on("longTap", "li", function(e){
										var _this = $(this);
										wcPop({
											skin: 'androidSheet',
											shadeClose: true,
						
											btns: [
												/*{text: '标为未读', style: 'font-size:14px;line-height:50px;'},
												{text: '置顶聊天', style: 'font-size:14px;line-height:50px;'},*/
												{
													text: '删除该聊天',
													style: 'font-size:14px;line-height:50px;',
													onTap() {
														wcPop({
															skin: 'android',
															content: '删除后，将会清空双方的聊天记录',
						
															btns: [
																{
																	text: '取消',
																	onTap() {
																		wcPop.close();
																	}
																},
																{
																	text: '删除',
																	style: 'color:#ffba00',
																	onTap() {
																		var fdidljc = _this.attr("userid");
																		console.log(fdidljc);
																		delsl(fdidljc);
																		_this.remove();
																		wcPop.close();
																	}
																}
															]
														});
													}
												}
											]
										});
									});
									// 跳转链接
									$(".wechat__panel").on("click", "*[routeUrl]", function(e){
										var routeurl = $(this).attr('routeUrl');
										if(!routeurl) return;
										window.location.href = routeurl;
									});
						
									//***2、通讯录-------------------------
									// 右侧浮动条
									$(".wc__addrFriend-floatletter").on("click", "em", function() {
										var letter = $(this).text();
										if($("#" + letter).length > 0){
											// 滚动到指定位置
											//$("#J__addrFriendList").parent().animate({ scrollTop: $("#" + letter).position().top}, 300);
											document.getElementById(letter).scrollIntoView();
										}
										$(".wc__addrFriend-showletter").text(letter).fadeIn(300);
						
										setTimeout(function(){
											$(".wc__addrFriend-showletter").fadeOut(300);
										}, 500);
									});
						
									// 通讯录（长按操作）
									
						// 			$("#J__addrFriendList").on("longTap", ".row", function(e){
						// 				var _this = $(this);
						// 				wcPop({
						// 					skin: 'androidSheet',
						// 					shadeClose: true,
						
						// 					btns: [
						// 						{
						// 							text: '设置备注及标签',
						// 							style: 'font-size:14px;line-height:50px;',
						// 							onTap() {
						// 								wcPop.close();
						// 							}
						// 						}
						// 					]
						// 				});
						// 			});
									
									//***3、我的-------------------------
									// 关于微聊系统
									$("#J__aboutChatRoom").on("click", function(){
										var aboutChat = wcPop({
											skin: 'ios',
											content: '<div>群聊系统</div>',
											//style: 'max-width: 750px',
						
											shadeClose: true,
						
											btns: [
												{
													text: '知道了',
													style: 'color:#5c93fd;',
													onTap() {
														wcPop.close(aboutChat);
													}
												}
											]
										});
									});
						
									// 退出登录
									$("#J__logout").on("click", function(){
										var logout = wcPop({
											skin: 'android',
											content: '确定要退出聊天室嚒？',
						
											btns: [
												{
													text: '取消',
													onTap() {
														wcPop.close();
													}
												},
												{
													text: '退出',
													style: 'color:#5c93fd',
													onTap() {
														window.location.href = "/login/logout";
														wcPop.close();
													}
												}
											]
										});
									});
								});
		</script>

		<script>
			refresh_fuc();
						function 生成信息(obj){
							let htmls
							htmls = '<li class="flexbox flex-alignc wc__material-cell" routeUrl="/chat/chat?id=' + obj.userid + '" userid="' + obj.merge + '">\
										<div class="img"><img src="' + obj.tx + '" />'
							if(obj.sl > 0) {
								htmls = htmls + '<em class="wc__badge">'+obj.sl+'</em></div>\
										<div class="info flex1">\
											<h2 class="title">' + obj.name + '<font color="#12328e">[私聊]</font></h2>\
											<p class="desc clamp2">' + obj.content + '</p></div>\
										<label class="time flex-selft">' + obj.time + '</label>\
									</li>'
							}else{
								htmls = htmls + '</div>\
										<div class="info flex1">\
											<h2 class="title">' + obj.name + '<font color="#12328e">[私聊]</font></h2>\
											<p class="desc clamp2">' + obj.content + '</p></div>\
										<label class="time flex-selft">' + obj.time + '</label>\
									</li>'
							}
							return htmls
						}
						//群消息
						 function refresh_fuc(){  
							 //return;
							 $.post("/chat/sl",
						    {
						      zt:"0"//状态
						    },
						    function(data,status){
								// 解析 JSON 数据
			                    // 检查是否存在 'code' 属性
			                    if (data.url) {
			                        // 存在 'code' 属性，表示返回的是一个错误信息对象
			                        //console.log('错误码：' + data.code + '，错误消息：' + data.msg);
			                        layer.msg(data.msg);
			                        setTimeout(function() {
			                            window.location.href = data.url;
			                        }, 2000); 
			                    }
			                    
								var html='';
			
							    for (var j in data.sl) {
							        var obj = data.sl[j];
							        html += 生成信息(obj)
							    }
								$('#sldata').html(html);
								//群聊部分
								for (var j in data.ql) {
								    //console.log(data.ql[j].id);
							        var obj = data.ql[j];
							        if(data.ql[j].sl == "0"){
							            $('#group'+data.ql[j].id).text();
							        }else{
							            $('#group'+data.ql[j].id).text(data.ql[j].sl);
							        }
							        
							    }
			                    //群聊部分groupid
			                    
						    });
						 }
						
						 setInterval(refresh_fuc, 5000); //刷新频率   
						
						function delsl(merge)
						{
							 $.post("/member/index/delsl",
						    {
						     merge:merge,//postQQ号码
						    },
						    function(data,status){
								//document.getElementById("user").innerHTML=data;
						    });
							}
		</script>

	</body>
</html>